<template>
  <div class="user-account">
    <Card>
      <p slot="title">银行列表</p>
       <i-form style="text-align: right;" ref="form-validate" inline :model="formItem" >
         <Form-item >
           <i-input v-model="formItem.userId"  placeholder="用户ID"></i-input>
         </Form-item>
         <Form-item >
           <Select placeholder="状态"  v-model="formItem.status">
           <Option v-for="(item,index) in option" :key="index" :value="item.value">{{ item.title }}</Option>
         </Select>
         </Form-item>
         <Form-item >
           <Button  @click="searchBtn" class="com-btm">
           搜索</Button>
         </Form-item>
       </i-form>
     <i-table :columns="allColumns" :data="newData"></i-table>
      <div style="margin-top: 10px; overflow: hidden;">
        <Page ref="page"
        style="float: left;"
        size="small" :total="dataCount" :current="pageCurrent"
        :page-size="pageSize" @on-change="changepage"
        @on-page-size-change="pagesize"
          show-total show-sizer show-elevator></Page>
        <Button size="small" style="float: left;
        margin-left: 10px;margin-top: 2px;background-color: #009688;" 
        type="primary"
        @click="goToPage()">跳转</Button>
      </div>
    </Card>
  </div>

</template>
<script>

  let testData = 
 [{
        userId: '14',
        availableBalance: '343',
        accountBalance: '534',
        staus: '开启',
        isdefault: 0,
        datatime:'2020-10-1 21:25:2'
      },
      {
        userId: '15',
        availableBalance: '53',
        accountBalance: '543',
        staus: '开启',
        isdefault: 1,
      },
      {
        userId: '16',
        availableBalance: '5345',
        accountBalance: '544',
        isdefault: 1,
        staus: '开启',
      }, {
        userId: '15',
        availableBalance: '44',
        accountBalance: '543',
        banknumber: '12345689',
        isdefault: 0,
        staus: '开启',

      },
      {
        userId: '16',
        availableBalance: '43',
        accountBalance: '564',
        banknumber: '12345689',
        isdefault: 1,
        staus: '开启',
      }, {
        userId: '15',
        availableBalance: '3453',
        accountBalance: '43',
        isdefault: 1,
        staus: '开启',
      }
    ];
  const isDefault = {
    0: {
      value: 0,
      name: '取消默认',
      name1:'是',
      color:'#FFB800',
    },
    1: {
      value: 1,
      name: '设为默认',
      name1:'否',
      color: '#009688'
    }
  };
  export default {
    name: 'user-account',
    data() {
      return {
        tempData: [],
        // 初始化信息总条数
        dataCount: 0,
        // 每页显示多少条
        pageSize: 5,
        pageCurrent: 1, //当前页
        formItem: {
          userId:'',
          status:''
        },
        option:[{
          value:'status',
          title:'状态'
        },{
          value:'dongjie',
          title:'冻结'
        },{
          value:'zengchang',
          title:'正常'
        }
        ],
        allColumns: [
          {
            type: 'selection',
            width: 50,
            align: 'center',
          },
          {
            title: '用户ID',
            key: 'userId'
          },
          {
            title: '账户余额',
            key: 'accountBalance'
          },
          {
            title: '可用余额',
            key: 'availableBalance'
          },
          {
            title: '状态',
            key: 'staus',
            render: (h, params) => {
              return h("div", [
                h(
                  "div", {
                    props: {
                      size: "small"
                    },
                    style: {
                      color:'green'
                    },
                  },
                  "开启"
                ),
              ])
            }
          },
          {
            title: '创建时间',
            key: 'datatime'
          },
          {
            title: '操作',
            key: 'action',
            align: 'center',
            filter: {
              type: 'Select',
              option: isDefault
            },
            render: (h, params) => {
              return h("div", [
                h(
                  "Button", {
                    props: {
                      size: "small"
                    },
                    style: {
                      marginRight: "5px",
                      backgroundColor: "#009688",
                      color: 'white'
                    },
                    on: {
                      click: () => {
                        this.$router.push({
                          name: 'edit_news_page'
                        })
                        // this.show(params.index)
                        // e.stopPropagation(); //阻止冒泡
                        // alert('查看');
                      }
                    }
                  },
                  "编辑"
                ),
                h(
                  'Tag', {
                    slot: 'context',
                    props: {
                      color: this.formatStatus(params.row.isdefault, isDefault).color
                    },
                  on: {
                    click: () => {
                      alert('查看');
                    }
                  }
                  },
                  this.formatStatus(params.row.isdefault, isDefault).name)
              ]);
            }

          }
        ],

        newData: [],
      };
    },

    methods: {
      // 是否默认的状态
      formatStatus(value, status) {
        return status[value] || {value: '', name: ''};
      },
      // 按条件搜索
      searchBtn() {
        this.$refs['form-validate'].validate((valid) => {
          console.log(this.formItem.status)
          if (valid) {
            this.$Message.success('搜索成功!');
          } else {
            this.$Message.error('搜索失败!');
          }
        })
      },
      // 获取历史记录信息
      getTestData() {
        // 保存取到的所有数据
        this.tempData = testData;
        this.dataCount = testData.length;
        // 初始化显示，小于每页显示条数，全显，大于每页显示条数，取前每页条数显示
        if (testData.length < this.pageSize) {
          this.newData = this.tempData;
        } else {
          this.newData = this.tempData.slice(0, this.pageSize);
        }
      },
      // 点击切换页面
      changepage(index) {
        //需要显示开始数据的index,(因为数据是从0开始的，页码是从1开始的，需要-1)
        let _start = (index - 1) * this.pageSize;
        //需要显示结束数据的index
        let _end = index * this.pageSize;
        //截取需要显示的数据
        this.newData = this.tempData.slice(_start, _end);
        //储存当前页
        this.page = index;
      },
      //每页显示的数据条数
      pagesize(index) {
        let _start = (this.pageCurrent - 1) * index;
        let _end = this.pageCurrent * index;
        this.newData = this.tempData.slice(_start, _end);
        //实时获取当前需要显示的条数
        this.pageSize = index;
      },
      //点击跳转到输入的页码
        goToPage() {
          let t_value = this.$refs.page.$el.lastElementChild.lastElementChild.childNodes[1].value;
          if (t_value == "") {
            this.$Message.info('请填写页数');
            return false;
          }
          if (t_value <= 0) {
            this.$Message.info('页码不能小于0');
            return false;
          }
          if (t_value > Math.ceil(this.dataCount / this.pageSize)) {
            this.$Message.info('超过总页数，无法跳转');
            // this.$refs.page.$el.lastElementChild.lastElementChild.childNodes[1].value = this.current;
            return false;
          }
          this.pageCurrent = parseInt(t_value);
          this.changepage(this.pageCurrent); //触发分页
        },
    },
    created() {
      this.getTestData();
    }
  }
</script>
<style lang="less">
  @import './business.less';
</style>
